<template>
  <page-frame>
    <div class="deviceBinding" style="vertical-align: top">
      <div class="toptitle">
        <div class="left"><span>设备列表</span> - <span>绑定</span></div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn" @click="save('ruleForm')" >保存</el-button>
            <el-button @click="back">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <!--基本信息-->
        <div class="panel">
          <div class="panel-content">
            <el-row>
              <el-col :span="10" >
                <el-form-item label="机构">
                  <el-input v-model="ruleForm.orgName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="设备供应商" prop="supplierId" >
                  <el-select v-model="ruleForm.supplierId" @change="selectSupplier" placeholder="请选择设备供应商" :disabled="status">
                    <el-option
                      v-for="item in supplieList"
                      :label="item.supplierName"
                      :value="item.supplierId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="设备类型" prop="deviceTypeId">
                  <el-select v-model="ruleForm.deviceTypeId" placeholder="请选择设备类型" :disabled="status">
                    <el-option
                      v-for="item in deviceTypeList"
                      :label="item.deviceTypeName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="设备编号" prop="deviceNo" >
                  <el-input v-model="ruleForm.deviceNo" :disabled="status"  maxlength="50"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="设备绑定">
                  <template>
                  <el-radio-group v-model="ruleForm.bindstatus" @change="memberChange">
                    <el-radio class="radio" :label="1" :disabled="status">床位</el-radio>
                    <el-radio class="radio" :label="2" :disabled="status">会员</el-radio>
                  </el-radio-group>
                    </template>
                </el-form-item>
              </el-col>
              <el-col :span="10" v-if="ruleForm.bindstatus==1">
                <el-form-item label="绑定床位">
                  <el-cascader
                    expand-trigger="hover"
                    :options="bedList"
                    v-model="form.bedInfor"
                    @change="handleChange"
                    placeholder="请选择所属房间"
                  ></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="10" v-if="ruleForm.bindstatus==2">
                <el-form-item label="绑定会员">
                  <el-autocomplete v-model="memberName" :disabled="status" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="设备状态" prop="devicestatus" v-if="currentWay!=1">
                  <el-select v-model="ruleForm.devicestatus" placeholder="请选择设备状态" >
                    <el-option label="闲置" :value="1">闲置</el-option>
                    <el-option label="在用" :value="2">在用</el-option>
                    <el-option label="停用" :value="3">停用</el-option>
                    <el-option label="故障" :value="4">故障</el-option>
                    <el-option label="报废" :value="5">报废</el-option>
                  </el-select>
                </el-form-item>
                </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
    </div>
  </page-frame>
</template>


<script>
  import intelligentHardwareApi from '../../service/healthManagement/intelligentHardwareApi';
  import commonJs from '../../config/common.js';
  import commonApi from '../../service/member/commonApi';
  export default {
    data() {
      return {
        currentWay:null,
        currentDeviceId:null,
        status:false,
        disapply:false,
        supplieList:[],
        deviceTypeList:[],
        ruleForm:{
          orgName:"",
          supplierId:"",
          deviceTypeId:"",
          deviceNo:"",
          bindstatus:1,
          memberName:"",
          memberId:"",
          bebId:"",
          buildingId:"",
          floorId:"",
          roomId:"",
          bedNo:"01",
          devicestatus:null,
        },
        rules:{
          supplierId: [
            {type:'number', required: true, message: '请选择设备供应商', trigger: 'change' }
          ],
          deviceTypeId: [
            {type:'number', required: true, message: '请选择设备类型', trigger: 'change' }
          ],
          deviceNo: [
            { required: true, message: '请输入设备编号', trigger: 'blur' }
          ],
        },
        form:{
          "bedInfor":[],
        },
        bedList:[],
        memberName:"",
        bindstatus:""
      }
    },
    methods: {
      init(){
        this.currentWay = this.$route.params.way;
        this.currentDeviceId = this.$route.params.deviceId;
        if(this.currentWay==1){//add
          this.status = false;
          this.disapply=true;
          this.getBedList();  //床位
        }else if(this.currentWay==2){//edit
          this.status = false;
          this.getDevDetail();
        }else if(this.currentWay==0){//detail
          this.status = true;
          this.getDevDetail();
        }
        this.getAllSupplier();
        this.getAllMember();
        this.getOrgName();
      },

      /**
       * 筛选会员
       */
      querySearchAsync(queryString, cb) {
        var members = this.members;
        var results = queryString ? members.filter(this.createStateFilter(queryString)) : members;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            cb(results);
      }, 1000);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.memberName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        this.memberInfor = item;
        this.ruleForm.memberId = item.memberId;
      },
      /**
       * bind bed select
       */
      handleChange(value) {
        console.log(value);
      },
      memberChange(){
        let self = this;
        if(self.ruleForm.bindstatus==1){  //床位
          self.memberName="";
          self.ruleForm.memberId="";
        }else if(self.ruleForm.bindstatus==2){  //会员
          self.form.bedInfor="";
        }
      },
      selectSupplier(){
        let self = this;
        intelligentHardwareApi.getAllDeviceTypes(self.ruleForm.supplierId).then(
          (response)=>{
          self.deviceTypeList = response.data.data;
         }
        );
      },
      /**
       * 获得所有会员
       */
      getAllMember(){
        let self = this;
        commonApi.getAllCheckInMemberInfor().then(function (response) {
          self.members = response.body.data;
          for(var i=0;i<self.members.length;i++){
            var  member = self.members[i];
            member.value = member.memberName;
          };
        })
      },

      getOrgName(){
        let self = this;
        intelligentHardwareApi.getOrgName().then(function (response) {
          self.ruleForm.orgName=response.body.data.msg;
        })
      },
      getAllSupplier(){
        let self = this;
        intelligentHardwareApi.getAllSupplier().then(res =>{
          self.supplieList = res.body.data;
        },res =>{

        });
      },
      getDevDetail(){
        let self = this;
        intelligentHardwareApi.getDeviceDetail(self.currentDeviceId).then(
          (response)=>{
          self.ruleForm = response.data.data;
      //  commonJs.changeBedList(self.form.bedInfo);
        if(self.ruleForm.memberId==""&&self.ruleForm.bebId!=""){
          self.ruleForm.bindstatus=1;
          self.form.bedInfor.push(self.ruleForm.buildingId);
          self.form.bedInfor.push(self.ruleForm.floorId);
          self.form.bedInfor.push(self.ruleForm.roomId);
          self.form.bedInfor.push(self.ruleForm.bebId);
        }else{
          self.ruleForm.bindstatus=2;
          self.memberName=self.ruleForm.memberName;
        }
        this.getBedList();  //床位
        }
        );
      },

      /**
       * 获取房间级联选择器下拉菜单
       */
      getBedList(){
        let self = this;
        if(self.ruleForm.bebId==""){
          self.ruleForm.bebId="01";
        }
        intelligentHardwareApi.getBedroomTreeWithBeds(self.ruleForm.bebId).then(function (response) {
//          console.debug(response.body.data);
          self.bedList =response.body.data;
//          console.debug(self.bedList);
          commonJs.changeBedList(self.bedList);
        })
      },

      /**
       * submit form
       */
      save(formName){
        let self = this;
        if(self.ruleForm.supplierId=="") {
          self.$message({
            type: 'error',
            message: '请选择供应商!'
          });
          return false;
        }
        if(self.ruleForm.deviceTypeId=="") {
          self.$message({
            type: 'error',
            message: '请选择设备类型!'
          });
          return false;
        }
        if(self.ruleForm.bindstatus==1){  //床位
          if(self.form.bedInfor.length<4) {
            self.$message({
              type: 'error',
              message: '请选择正确的新床位!'
            });
            return false;
          }
          self.ruleForm.bebId = self.form.bedInfor[self.form.bedInfor.length-1];
          self.ruleForm.roomId=self.form.bedInfor[self.form.bedInfor.length-2];
          self.ruleForm.buildingId=self.form.bedInfor[self.form.bedInfor.length-4];
          self.ruleForm.floorId=self.form.bedInfor[self.form.bedInfor.length-3];
          self.ruleForm.memberName="";
          self.ruleForm.memberId="";
        }else if(self.ruleForm.bindstatus=2){  //会员
          if(self.memberName=="") {
            self.$message({
              type: 'error',
              message: '请选择会员名称!'
            });
            return false;
          }
          self.ruleForm.bebId = "";
          self.ruleForm.roomId="";
          self.ruleForm.buildingId="";
          self.ruleForm.floorId="";
          self.ruleForm.memberName=self.memberName;
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            intelligentHardwareApi.saveDevice(self.ruleForm).then(res => {
              if(res.data.data.msg == "设备编号重复！") {
              self.$message({
                message: '设备编号重复!',
                type: 'warning'
              });
            }
           else{
              self.$message({
                message: '绑定成功！',
                type: 'success'
              });
              this.$router.push({name: 'intelligentHW'});
            }
          });
          }else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      /**
       * back upper level
       */
      back(){
        this.$router.push({name: 'intelligentHW'});
      },
    },
    mounted: function () {
      this.init();
    },
  }
</script>
<style>
  .deviceBinding .el-tabs__item{
    font-weight: bolder;
    font-size:16px;
  }
  .deviceBinding .el-input{
    width: 80%;
  }
  .deviceBinding .input input{
    display: inline-block;
  }
  .deviceBinding .el-select {
    display: block;
    position: relative;
  }
  .deviceBinding .el-select .el-input .el-input__icon {
    top: 50%!important;
  }
  .deviceBinding .el-cascader{
    width:80%;
  }
  .deviceBinding .el-cascader .el-input{
    width:100%!important;
  }
</style>
